<template>
  <div class="content">
    <div class="login-box">
      <div class="hd">
        <h3 class="title semibold">库尔勒市中小学入学服务平台</h3>
      </div>
      <div class="bd inner fn-clearfix">
        <div class="login-retrieve">
          <div class="login-tips">
            <h3>密码找回</h3>
            <p>新密码会以短信的形式发至预留手机号！</p>
          </div>
          <van-form @submit="submitForm" :show-error="false">
            <van-field
              v-model="ruleForm.idno"
              name="idNo"
              left-icon="yonghu"
              placeholder="输入学生身份证号/证件号"
              :rules="[{ required: true, message: '请填写身份证号/证件号' }]"
            >
              <van-icon
                class="iconfont icon01"
                slot="left-icon"
                name="yonghu"
              ></van-icon>
            </van-field>
            <van-field
              v-model="ruleForm.phone"
              name="phone"
              left-icon="shouji"
              placeholder="输入预留手机号码"
              :rules="[
                {
                  pattern: /^1[34578]\d{9}$/,
                  required: true,
                  message: '请输入正确的手机号码',
                },
              ]"
            >
              <van-icon
                class="iconfont icon02"
                slot="left-icon"
                name="shouji"
              ></van-icon>
            </van-field>
            <van-field
              class="code"
              v-model="ruleForm.code"
              name="code"
              left-icon="yanzhengma"
              placeholder="输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
            >
              >
              <van-icon
                class="iconfont icon03"
                slot="left-icon"
                name="yanzhengma"
              ></van-icon>
              <template #button>
                <div class="img-verify">
                  <img :src="verifyUrl" alt="" @click="refreshCode" />
                </div>
              </template>
            </van-field>
            <div class="footer-btn">
              <van-button round block type="info" native-type="submit"
                >确认找回</van-button
              >
            </div>
          </van-form>
          <div class="login-bd-fr">
            已经获取，<router-link :to="{ path: '/zmkm' }"
              >马上登录</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Base64 } from "js-base64";
import fetches from "../utils/request";
const { defaultHost } = fetches;
import { getSysZt } from "../utils/api";
export default {
  name: "forgot",
  components: {},
  data() {
    return {
      ruleForm: {
        idno: "",
        code: "",
        phone: "",
      },
      identifyCodes: "", //验证码随机数
      verifyUrl: "", //验证码图片
    };
  },
  methods: {
    refreshCode() {
      const identifyCode = parseInt(Math.random() * 1000, 10);
      this.identifyCodes = identifyCode;
      this.verifyUrl = `${defaultHost}/api/Student/ValidateCode?key=${this.identifyCodes}`;
    },
    submitForm(values) {
      const params = {
        idno: this.ruleForm.idno,
        phone: this.ruleForm.phone,
        code: this.ruleForm.code,
      };
      if (this.isDelayApply) {
        this.$fetch(
          `/api/Student/GetDelayPassword?key=${this.identifyCodes}`,
          params,
          "post"
        ).then((data) => {
          if (data.res == 0) {
            Toast.success({
              type: "success",
              message: data.msg,
              duration: 2000,
            });
            setTimeout(() => {
              this.$router.push({ path: "/zmkm" });
            }, 2000);
          } else {
            this.refreshCode();
            this.$toast(data.msg);
          }
        });
      } else {
        this.$fetch(
          `/api/Student/GetPassword?key=${this.identifyCodes}`,
          params,
          "post"
        ).then((data) => {
          if (data.res == 0) {
            Toast.success({
              type: "success",
              message: data.msg,
              duration: 2000,
            });
            setTimeout(() => {
              this.$router.push({ path: "/zmkm" });
            }, 2000);
          } else {
            this.refreshCode();
            this.$toast(data.msg);
          }
        });
      }
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  created() {
    this.getSysZt();
  },
  mounted() {
    this.refreshCode();
  },
  computed: {
    isDelayApply() {
      return this.$store.state.isDelayApply;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.content {
  padding-bottom: 60px;
  .login-box {
    .hd {
      height: 240px;
      background: url(~@/assets/images/bg_dl.png) no-repeat;
      padding-top: 60px;
      .title {
        margin: auto;
        font-size: 42px;
        color: #fff;
        position: relative;
        &::before {
          content: "";
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background-image: linear-gradient(164deg, #02c7ff 2%, #0195ff 100%);
          position: absolute;
          left: 67px;
          bottom: 0;
        }
        &::after {
          content: "";
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-image: linear-gradient(162deg, #3aee91 2%, #26b050 79%);
          position: absolute;
          right: 76px;
          top: 0;
        }
      }
    }
    .bd {
      .login-retrieve {
        margin-top: -120px;
        padding: 30px;
        text-align: left;
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 0 1px 10px 0 rgba(153, 153, 153, 0.3);
        .login-tips {
          margin-bottom: 65px;
          h3 {
            font-size: 36px;
            color: #000;
            // font-weight: bold;
            font-family: PingFangSC-Semibold;
            margin-bottom: 10px;
          }
          p {
            color: #ff0000;
            font-size: 28px;
          }
        }
        .iconfont {
          margin-right: 12px;
          margin-top: 5px;
        }
        .icon01 {
          width: 36px;
          height: 36px;
          background: url(~@/assets/images/icon_yh.png) no-repeat center/cover;
        }
        .icon02 {
          width: 30px;
          height: 40px;
          background: url(~@/assets/images/icon_sj.png) no-repeat center/cover;
        }
        .icon03 {
          width: 33px;
          height: 39px;
          background: url(~@/assets/images/icon_yzm.png) no-repeat
            center/contain;
        }
        .img-verify {
          width: 138px;
          height: 54px;
          border: 1px #dcdfe6 solid;
          border-radius: 5px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .footer-btn {
      margin-top: 61px;
      .van-button {
        background-image: linear-gradient(137deg, #07a2ff 0%, #0195ff 100%);
      }
    }
    .login-bd-fr {
      margin: 30px 0 0;
      text-align: center;
      // font-family: "PingFangSC-Regular";
      font-size: 32px;
      color: #999;
      a {
        color: $bsC;
      }
    }
  }
}
</style>
<style lang="scss">
.footer-btn .van-button {
  height: 88px;
  font-size: 36px;
}
.login-retrieve {
  .van-cell {
    padding: 20px 0 15px;
    margin-bottom: 20px;
  }
  .van-cell::after {
    left: 0;
    right: 0;
  }
  .van-icon {
    min-width: 0;
  }
}
</style>
